<template>
  <div class="dongligui">
    <img class="dongliImg" src="@/assets/img/chart/dongligui.png" alt="" srcset="" />
    <svg
      width="504px"
      height="290px"
      viewBox="0 0 504 290"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <radialGradient
          cx="47.7274489%"
          cy="40.0057001%"
          fx="47.7274489%"
          fy="40.0057001%"
          r="92.3797749%"
          gradientTransform="translate(0.477274,0.400057),scale(0.359202,1.000000),rotate(90.000000),translate(-0.477274,-0.400057)"
          id="radialGradient-1"
        >
          <stop stop-color="#479FDD" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#2C67BC" offset="100%"></stop>
        </radialGradient>
        <circle id="path-2" cx="3.5" cy="186.5" r="3.5"></circle>
        <filter x="-128.6%" y="-128.6%" width="357.1%" height="357.1%" filterUnits="objectBoundingBox" id="filter-3">
          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
          <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
          <feColorMatrix
            values="0 0 0 0 0.419335067   0 0 0 0 0.905836046   0 0 0 0 0.986964524  0 0 0 0.5 0"
            type="matrix"
            in="shadowBlurOuter1"
          ></feColorMatrix>
        </filter>
        <circle id="path-4" cx="488.5" cy="200.5" r="3.5"></circle>
        <filter x="-128.6%" y="-128.6%" width="357.1%" height="357.1%" filterUnits="objectBoundingBox" id="filter-5">
          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
          <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
          <feColorMatrix
            values="0 0 0 0 0.419335067   0 0 0 0 0.905836046   0 0 0 0 0.986964524  0 0 0 0.5 0"
            type="matrix"
            in="shadowBlurOuter1"
          ></feColorMatrix>
        </filter>
        <radialGradient
          cx="47.7274489%"
          cy="40.0057001%"
          fx="47.7274489%"
          fy="40.0057001%"
          r="92.3797749%"
          gradientTransform="translate(0.477274,0.400057),scale(0.319372,1.000000),rotate(90.000000),translate(-0.477274,-0.400057)"
          id="radialGradient-6"
        >
          <stop stop-color="#479FDD" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#4498BE" offset="100%"></stop>
        </radialGradient>
        <linearGradient x1="95.921726%" y1="50%" x2="0%" y2="50%" id="linearGradient-7">
          <stop stop-color="#87D7F9" offset="0%"></stop>
          <stop stop-color="#5EB0F5" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="43.053719%" y1="0%" x2="56.946281%" y2="100%" id="linearGradient-8">
          <stop stop-color="#7FF9CB" offset="0%"></stop>
          <stop stop-color="#4293E9" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="动力柜" transform="translate(-336.000000, -237.000000)">
          <g id="编组-35" transform="translate(342.000000, 237.000000)">
            <g id="编组-28" transform="translate(293.000000, 62.000000)">
              <g id="编组-26">
                <rect id="9" fill="#2F6DBF" opacity="0.895653134" x="0" y="0" width="120" height="30" rx="2"></rect>
                <path
                  d="M115,0 L118,0 C119.104569,-2.02906125e-16 120,0.8954305 120,2 L120,5 L120,5"
                  id="矩形"
                  stroke="#6DEBFC"
                ></path>
                <path
                  d="M0,0 L3,0 C4.1045695,-2.02906125e-16 5,0.8954305 5,2 L5,5 L5,5"
                  id="矩形备份-77"
                  stroke="#6DEBFC"
                  transform="translate(2.500000, 2.500000) scale(-1, 1) translate(-2.500000, -2.500000) "
                ></path>
                <path
                  d="M115,25 L118,25 C119.104569,25 120,25.8954305 120,27 L120,30 L120,30"
                  id="矩形备份-38"
                  stroke="#6DEBFC"
                  transform="translate(117.500000, 27.500000) scale(1, -1) translate(-117.500000, -27.500000) "
                ></path>
                <path
                  d="M0,25 L3,25 C4.1045695,25 5,25.8954305 5,27 L5,30 L5,30"
                  id="矩形备份-78"
                  stroke="#6DEBFC"
                  transform="translate(2.500000, 27.500000) scale(-1, -1) translate(-2.500000, -27.500000) "
                ></path>
              </g>
              <text
                id="五纺3楼"
                font-family="PingFang-SC-Medium, PingFang SC"
                font-size="18"
                font-weight="400"
                fill="#FFFFFF"
              >
                <tspan x="33.1" y="22">{{ this.data.position }}</tspan>
              </text>
              <g id="编组" transform="translate(14.000000, 7.000000)" fill="#FFFFFF" fill-rule="nonzero">
                <path
                  d="M6.70833333,15.3765381 C8.20833333,13.9552912 12,9.94872847 12,5.84741591 C12,2.6123872 9.30555556,0 6,0 C2.68055556,0 0,2.6123872 0,5.84741591 C0,9.93519278 3.79166667,13.9417555 5.29166667,15.3765381 C4.02777778,15.4442166 3.09722222,15.6607875 3.09722222,15.9315012 C3.09722222,16.242822 4.40277778,16.5 6.01388889,16.5 C7.625,16.5 8.93055556,16.242822 8.93055556,15.9315012 C8.90277778,15.6607875 7.97222222,15.4306809 6.70833333,15.3765381 Z M5.88888889,2.19278097 C7.95833333,2.19278097 9.52777778,3.83059885 9.52777778,5.84741591 L9.52777778,5.8609516 C9.52777778,7.87776866 7.94444444,9.50205086 5.875,9.50205086 C3.80555556,9.50205086 2.13888889,7.85069729 2.13888889,5.84741591 C2.13888889,3.81706317 3.81944444,2.19278097 5.88888889,2.19278097 Z"
                  id="形状"
                ></path>
              </g>
            </g>
            <g id="编组-27" transform="translate(293.000000, 107.000000)">
              <rect id="10" fill="#2B65B0" opacity="0.895653134" x="0" y="0" width="130" height="63" rx="2"></rect>
              <path
                d="M125,0 L128,0 C129.104569,-2.02906125e-16 130,0.8954305 130,2 L130,5 L130,5"
                id="矩形"
                stroke="#6DEBFC"
              ></path>
              <path
                d="M0,0 L3,0 C4.1045695,-2.02906125e-16 5,0.8954305 5,2 L5,5 L5,5"
                id="矩形备份-77"
                stroke="#6DEBFC"
                transform="translate(2.500000, 2.500000) scale(-1, 1) translate(-2.500000, -2.500000) "
              ></path>
              <path
                d="M125,58 L128,58 C129.104569,58 130,58.8954305 130,60 L130,63 L130,63"
                id="矩形备份-38"
                stroke="#6DEBFC"
                transform="translate(127.500000, 60.500000) scale(1, -1) translate(-127.500000, -60.500000) "
              ></path>
              <path
                d="M0,58 L3,58 C4.1045695,58 5,58.8954305 5,60 L5,63 L5,63"
                id="矩形备份-78"
                stroke="#6DEBFC"
                transform="translate(2.500000, 60.500000) scale(-1, -1) translate(-2.500000, -60.500000) "
              ></path>
              <text
                id="4号-络筒机车头"
                font-family="PingFang-SC-Medium, PingFang SC"
                font-size="24"
                font-weight="400"
                line-spacing="24"
                fill="#FFFFFF"
              >
                <tspan x="10" y="31">{{ this.data.neighberNo }}</tspan>
                <tspan x="45.976" y="32.848" font-size="16">号</tspan>
                <tspan x="52.128" y="32.848" font-size="18"></tspan>
                <tspan x="20.432" y="56.848" font-size="18">
                  {{ this.data.name }}
                </tspan>
              </text>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'dongligui',
  props: ['data'],
  data() {
    return {}
  },

  mounted() {},
  methods: {}
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/workshop.less';
</style>
